<template>
  <div class="item cursor-pointer mb-[10px] p-[12px] mx-[12px]">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">{{ itemData.props.title }}</a-typography-title>
    </a-typography>
    <a-typography-paragraph class="text-left" :class="{'style':itemData.props.isVertical}">
      <template v-for="(item,index) in itemData.props.list" :key="index">
        <a-space size="large" class="mr-[10px]">
          <a-form-item-rest>
            <a-checkbox v-model:checked="item.checked" :disabled="itemData.isLocked" class="checkbox">
              {{ item.text }}
            </a-checkbox>
          </a-form-item-rest>
        </a-space>
      </template>
    </a-typography-paragraph>
  </div>
</template>

<script setup>
import {defineProps} from "vue";

const {itemData} = defineProps({
  itemData: {
    type: Object,
    default: {}
  }
})
</script>

<style scoped lang="scss">
.style {
  display: flex;
  flex-direction: column;
  :deep(.ant-space){
    margin-bottom: 10px;
  }
}
</style>
